<script lang="ts" setup>
import type { XuanXiaoTeach } from '@/api/designer/model'
import type { Campus01ComponentMeta } from '@/definitions/type'
import GpBaiduMapPage from '@/components/GpMap/GpMap.vue'
import { useCompStyleRender } from '@/hooks/useCompStyleRender'
import { usePrefix } from '@/hooks/usePrefix'
import { useDesignStore } from '@/stores'
import { computed, ref } from 'vue'
import './RenderCampus01.less'

defineOptions({
  name: 'RenderCampus01',
})
const props = defineProps<{
  render: Campus01ComponentMeta
}>()

const designStore = useDesignStore()
const platform = computed(() => designStore.config.platform)
const { prefix } = usePrefix()
const { wraperCls, style } = useCompStyleRender(props)
const mapRef = ref()
/** 此模板显示上限4个 */
const renderedItems = computed(() => props.render.config.teachs!.slice(0, 4))
// const renderedCity = computed(() => props.render.config.code)
const renderedCity = ref(1)
function handleMore() { }

const curId = ref<number>()
function handlecurItem(item: XuanXiaoTeach) {
  curId.value = item.id
  const data = {
    areaId: item.id, // 地区 id
    areaName: item.areaName, // 地区名称
    address: item.address, // 地址
    lng: item.lng,
    lat: item.lat, // 坐标
  }

  mapRef.value.handleSelectAddress(data)
}
</script>

<template>
  <div :style="style" :class="[prefix('wraper'), prefix(wraperCls), prefix(platform)]">
    <div :class="prefix('campus-box')">
      <div :class="[prefix('campus-map'), platform === 'pc' ? 'order-last' : '']">
        <GpBaiduMapPage ref="mapRef" width="320px" :items="renderedItems" />
      </div>
      <div :class="prefix('campus-list')">
        <div :class="prefix('campus-list-detail')">
          <div v-if="platform === 'pc'" :class="prefix('campus-select')">
            <i class="iconfont icon-moban1_chengshi" :class="prefix('campus-select-icon')" />
            <i class="iconfont icon-bianjiqi_jiantou_you" :class="prefix('arrow-icon')" />
            <select
              v-model="renderedCity" size="large" :bordered="false"
              :dropdown-menu-style="{ maxWidth: '200px', backgroundColor: 'lightblue' }"
            >
              <option disabled :value="1">
                广州
              </option>
            </select>
          </div>
          <div
            v-for="item in renderedItems" :key="item.id"
            :class="[prefix('campus-info'), curId === item.id ? prefix('cur-teachs') : '']"
            @click="handlecurItem(item)"
          >
            <i v-if="platform === 'mobile'" class="iconfont icon-moban1_dingwei2" :class="[prefix('icon-local')]" />
            <div :class="prefix('info-text')">
              <span v-if="item.name" :class="prefix('text-title')"> {{ item.name }}</span>
              <span v-if="platform === 'mobile' && item.address" :class="prefix('text-desc')"> {{ item.address }}</span>
            </div>
            <i v-if="platform === 'mobile'" class="iconfont icon-moban1_daohang" :class="[prefix('icon-nav')]" />
          </div>
        </div>
        <div v-if="platform === 'pc' && props.render.config.buttonUrl" :class="prefix('more')" @click="handleMore">
          更多校区 <i class="iconfont icon-moban1_jiantou_xiangyou" />
          <!--  && props.render.config.teachs!.length > 4 -->
        </div>
      </div>
      <div
        v-if="platform === 'mobile' && props.render.config.buttonUrl && props.render.config.teachs!.length > 4"
        :class="prefix('more')" @click="handleMore"
      >
        更多
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
:deep(.ant-select-selector) {
  height: 52px !important;
}

:deep(.ant-select-selection-item) {
  line-height: 48px !important;
  color: #333 !important;
}
</style>
